<template>
    <div class="model" :class="{hideSidebar:!sidebar.opened}" style="margin-top: 90px;">   
        <div class="model-show" v-show="!isShowMachine && !isShowScoreCard">
            <!-- 渠道权限 -->
            <div class="query" v-show="business.length > 0">
                <span style="display: inline-block; font-size: 14px;">{{$t('overdueData.channelAuth')}}：</span>
                <el-select v-model='channel' size='small'>
                    <el-option
                    v-for='item in business'
                    :key='item.channel'
                    :label='item.org_name'
                    :value='item.channel'>
                    </el-option>
                </el-select>
            </div>
            <div class="model-cont">
                <div class="model-item item1">
                    <!-- 规则 -->
                    <div class="model-module">
                        <div class="model-img">
                            <img :src="guize" alt=""> 
                        </div>
                        <div class="model-text">
                            {{$t('ModelDisplay.rule')}}
                        </div>
                    </div>
                </div>
                <div class='model-arrow1'>
                    <img :src="arrow1" alt="">
                </div>
                <div class="model-item item2">
                    <!-- 反欺诈 -->
                    <div class="model-module">
                        <div class="model-img">
                            <img :src="fanqizha" alt=""> 
                        </div>
                        <div class="model-text">
                            {{$t('ModelDisplay.AntiFraud')}}
                        </div>
                    </div>
                </div>
                <div class='model-arrow2'>
                    <img :src="arrow2" alt="">
                </div>
                <div class="model-item item3">
                    <!-- 首借 -->
                    <div class="model-module sj" style="margin-top: -15px;">
                        <div class="model-img">
                            <img :src="shoujie" alt=""> 
                        </div>
                        <div class="model-text">
                            {{$t('ModelDisplay.FirstBorrowing')}}
                        </div>
                    </div>
                    <!-- 续贷 -->
                    <div class="model-module" style="margin-top: 150px;">
                        <div class="model-img">
                            <img :src="xudai" alt=""> 
                        </div>
                        <div class="model-text">
                            {{$t('approvalDetail.ContinuedLoan')}}
                        </div>
                    </div>
                </div>
                <div class='model-arrow3'>
                    <img :src="arrow3" alt="">
                </div>
                <div class="model-item item4">
                    <!-- 机器模型 -->
                    <div class="model-module jqmx" style="margin-top: -25px;" @mouseenter="showActive(1)" @mouseleave="showActive(0)" @click="intoFnjq({model: 'risk', modelType: 2})">
                        <div class="model-img">
                            <img class="imgs" :src="jiqimoxing" v-show="active !== 1" alt=""> 
                            <img class="imgs-active" :src="jiqihover" v-show="active === 1" alt="">
                        </div>
                        <div class="model-text" :class="active === 1? 'text-active' : '' ">
                            {{$t('ModelDisplay.MachineModel')}}
                        </div>
                    </div>
                    <!-- 评分卡 -->
                    <div class="model-module jqmx" style="margin-top: 90px;" @mouseenter="showActive(2)" @mouseleave="showActive(0)" @click="intoFnpf({model: 'risk', modelType: 1})">
                        <div class="model-img">
                            <img class="imgs" :src="pingfenka" v-show="active !== 2" alt=""> 
                            <img class="imgs-active" :src="pingfenkahover" v-show="active === 2" alt="">
                        </div>
                        <div class="model-text" :class="active === 2? 'text-active' : '' ">
                            {{$t('ModelDisplay.ScoreCard')}}
                        </div>
                    </div>
                    <!-- 机器模型 -->
                    <div class="model-module jqmx" style="margin-top: 50px;" @mouseenter="showActive(3)" @mouseleave="showActive(0)" @click="intoFnjq({model: 'riskReloan', modelType: 2})">
                        <div class="model-img">
                            <img class="imgs" :src="jiqimoxing" v-show="active !== 3" alt=""> 
                            <img class="imgs-active" :src="jiqihover" v-show="active === 3" alt="">
                        </div>
                        <div class="model-text" :class="active === 3? 'text-active' : '' ">
                            {{$t('ModelDisplay.MachineModel')}}
                        </div>
                    </div>
                    <!-- 评分卡 -->
                    <div class="model-module jqmx" style="margin-top: 90px;" @mouseenter="showActive(4)" @mouseleave="showActive(0)" @click="intoFnpf({model: 'riskReloan', modelType: 1})">
                        <div class="model-img">
                            <img class="imgs" :src="pingfenka" v-show="active !== 4" alt=""> 
                            <img class="imgs-active" :src="pingfenkahover" v-show="active === 4" alt="">
                        </div>
                        <div class="model-text" :class="active === 4? 'text-active' : '' ">
                            {{$t('ModelDisplay.ScoreCard')}}
                        </div>
                    </div>
                </div>
                <div class='model-arrow4'>
                    <img :src="arrow4" alt="">
                </div>
                <!-- 审批策略 -->
                <div class="model-item item5">
                    <div class="model-module">
                        <div class="model-img">
                            <img :src="shenpicelue" alt=""> 
                        </div>
                        <div class="model-text">
                            {{$t('ModelDisplay.ApprStrategy')}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="model-jiqi" v-show="isShowMachine">
            <div class="back" @click="backFn1">
                {{$t('btn.back')}}
            </div>
            <div class="jiqi-left">
                <img :src="jiqileft" alt="">
            </div>
            <div class="jiqi-ball">
                <div style="text-align: right;">
                    <img :src="jiqiball" alt="">
                </div>
                <div class="jiqi-text">
                    {{$t('ModelDisplay.MachineModel')}}
                </div>
            </div>
            <div class="jiqi-cont" v-for="(item, index) in machineArr" :key="index">
                <div class="jiqi-title">{{item.desc}}</div>
                <div class="jiqi-data">
                    <div class="jiqi-data-head">
                        <div>{{$t('ModelDisplay.CreditScoring')}}</div>
                        <div>{{$t('approvalDetail.advisePass')}}</div>
                        <div>{{$t('ModelDisplay.autoPassRate')}}</div>
                    </div>
                    <div class="jiqi-data-body" v-for="(item2, index2) in item.details" :key="index2">
                        <div>{{item2.value}}</div>
                        <div>{{item2.suggest}}%</div>
                        <div>{{item2.pass}}%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="model-score" v-show="isShowScoreCard">
            <div class="back" @click="backFn2">
                {{$t('btn.back')}}
            </div>
            <div class="score-left">
                <img :src="scoreleft" alt="">
            </div>
            <!-- <div class="score-ball">
                <div class="score-text">
                    {{$t('ModelDisplay.ScoreCard')}}
                </div>
                <div class="score-img">
                    <img :src="scoreball" alt="">
                </div>
            </div> -->
            <div class="score-main">
                <div class="score-cont" v-for="(item, index) in machineArr" :key="index">
                    <div class="score-title">{{item.desc}}</div>
                    <div class="score-data">
                        <div class="score-data-head">
                            <div>{{$t('RiskManager.threshold')}}</div>
                            <div>{{$t('RiskManager.score')}}</div>
                        </div>
                        <div class="score-data-body" v-for="(item2, index2) in item.details" :key="index2">
                            <div>{{item2.value}}</div>
                            <div>{{item2.score}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getChannels } from 'api/customQuery/index';
    import guize from 'assets/images/model/guize.png';
    import fanqizha from 'assets/images/model/fanqizha.png';
    import shoujie from 'assets/images/model/shoujie.png';
    import xudai from 'assets/images/model/xudai.png';
    import jiqimoxing from 'assets/images/model/jiqimoxing.png';
    import pingfenka from 'assets/images/model/pingfenka.png';
    import shenpicelue from 'assets/images/model/shenpicelue.png';
    import arrow1 from 'assets/images/model/arrow1.png';
    import arrow2 from 'assets/images/model/arrow2.png';
    import arrow3 from 'assets/images/model/arrow3.png';
    import arrow4 from 'assets/images/model/arrow4.png';
    import jiqihover from 'assets/images/model/jiqi-hover.png';
    import pingfenkahover from 'assets/images/model/pingfenka-hover.png';
    import jiqileft from 'assets/images/model/machine/jiqi-left.png';
    import jiqiball from 'assets/images/model/machine/jiqi-ball.png';
    import scoreleft from 'assets/images/model/score/score-left.png';
    import scoreball from 'assets/images/model/score/score-ball.png';
    import { getModelShow } from 'api/RiskManager/ModelManager/index';
    export default {
        data() {
            return {
                guize,
                fanqizha,
                shoujie,
                xudai,
                jiqimoxing,
                pingfenka,
                shenpicelue,
                arrow1,
                arrow2,
                arrow3,
                arrow4,
                jiqihover,
                pingfenkahover,
                jiqileft,
                jiqiball,
                scoreleft,
                scoreball,
                active: 0,
                isShowMachine: false,
                isShowScoreCard: false,
                machineArr: [],
                channel: '',
                business: []
            }
        },
        created() {
            this.getChannel();
        },
        computed: {
            sidebar() {
                return this.$store.state.app.sidebar;
            }
        },
        methods: {
            // 渠道下拉
            getChannel() {
                getChannels()
                .then(response => {
                    this.business = response.data;
                    this.channel = response.data[0].channel;
                })
            },
            // 划过
            showActive(index) {
                this.active = index;
            },
            // 进入机器模型页面
            intoFnjq(data) {
                let obj = {};
                obj.channel = this.channel;
                obj.model = data.model;
                obj.modelType = data.modelType;
                getModelShow(obj)
                .then(res => {
                    if (res.status === 200) {
                        if (res.data.length > 0) {
                            this.machineArr = res.data;
                            this.isShowMachine = true;
                        } else {
                            this.$message({
                                showClose: true,
                                type: "warning",
                                message: this.$t("ModelDisplay.notDataWarn")
                            });
                            this.machineArr = [];
                            this.isShowMachine = false;
                        }
                    }
                })
            },
            // 进入评分卡页面
            intoFnpf(data) {
                let obj = {};
                obj.channel = this.channel;
                obj.model = data.model;
                obj.modelType = data.modelType;
                getModelShow(obj)
                .then(res => {
                    if (res.status === 200) {
                        if (res.data.length > 0) {
                            this.machineArr = res.data;
                            this.isShowScoreCard = true;
                        } else {
                            this.$message({
                                showClose: true,
                                type: "warning",
                                message: this.$t("ModelDisplay.notDataWarn")
                            });
                            this.machineArr = [];
                            this.isShowScoreCard = false;
                        }
                    }
                })
            },
            // 机器模型返回
            backFn1() {
                this.isShowMachine = false;
            },
            // 评分卡返回
            backFn2() {
                this.isShowScoreCard = false;
            }
        }
    }
</script>

<style scoped lang='scss'>
	@import "src/styles/mixin.scss";
	.model {
		@include clearfix;
		position: relative;
		min-height: 100%;
		width: 100%;
		&.hideSidebar {
			.model-show {
                position:fixed;
                top: 90px;
                left: 36px;
                width: calc(100% - 36px);
                height: calc(100% - 90px);
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background: url('../../../assets/images/model/model-bg.jpg')no-repeat center;
                background-size: 100% 100%;
            }
            .model-jiqi {
                position:fixed;
                top: 90px;
                left: 36px;
                width: calc(100% - 36px);
                height: calc(100% - 90px);
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background: url('../../../assets/images/model/machine/jiqi-bg.jpg')center center;
                background-size: 100% 100%;
            }
            .model-score {
                // position:fixed;
                // top: 90px;
                // left: 36px;
                width: 100%;
                min-height: calc(100% - 90px);
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background: url('../../../assets/images/model/score/score-bg.jpg')center center;
                background-size: 100% 100%;
            }
		}
		.model-show {
            position:fixed;
            top: 90px;
            left: 210px;
            width: calc(100% - 210px);
            height: calc(100% - 90px);
            min-width: 1000px;
            z-index:-10;
            zoom: 1;
            background: url('../../../assets/images/model/model-bg.jpg')no-repeat center;
            background-size: 100% 100%;
        }
        .model-jiqi {
            position:fixed;
            top: 90px;
            left: 210px;
            width: calc(100% - 210px);
            height: calc(100% - 90px);
            min-width: 1000px;
            z-index:-10;
            zoom: 1;
            background: url('../../../assets/images/model/machine/jiqi-bg.jpg')no-repeat center;
            background-size: 100% 100%;
        }
        .model-score {
            // position:fixed;
            // top: 90px;
            // left: 210px;
            width: 100%;
            min-height: calc(100% - 90px);
            min-width: 1000px;
            z-index:-10;
            zoom: 1;
            background: url('../../../assets/images/model/score/score-bg.jpg')no-repeat center;
            background-size: 100% 100%;
        }
    }
    .model-cont {
        width: 100%;
        height: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .item1, .item2, .item3, .item5 {
            width: 10%;
        }
        .item4 {
            width: 16%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .model-module {
            color: #5689aa;
            text-align: center;
            cursor: pointer;
            .model-img>img {
                width: 65%;
                height: 65%;
            }
            .model-text {
                text-align: center;
                line-height: 35px;
                font-size: 20px;
            }
            .text-active {
                font-size: 22px;
                color: #90d3ff;
            }
        }
        .sj {
            .model-img>img {
                width: 55%;
                height: 55%;
            }
        }
        .jqmx {
            display: flex;
            align-items: center;
            height: 90px;
            .model-img {
                .imgs {
                    width: 80px;
                    height: auto;
                    margin: 0 10px;
                }
                .imgs-active {
                    width: 90px;
                    height: auto;
                    margin: 0 5px;
                }
            }
        }
        .model-arrow1 {
            width: 8%;
            margin-top: -25px;
            box-sizing: border-box;
            img { 
                width: 100px;
                height: 18px;
            }
        }
        .model-arrow2 {
            width: 8%;
            margin-top: -25px;
            box-sizing: border-box;
            img { 
                width: 100px;
                height: 200px;
            }
        }
        .model-arrow3 {
            width: 10%;
            margin-top: -50px;
            box-sizing: border-box;
            img { 
                width: 100px;
                height: 460px;
            }
        }
        .model-arrow4 {
            width: 12%;
            margin-left: 10px;
            margin-top: -25px;
            box-sizing: border-box;
            img { 
                width: 145px;
                height: 450px;
            }
        }
    }
    .model-jiqi {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        .jiqi-left {
            margin-left: 10px;
            width: 20%;
            img {
                width: 100%;
                height: auto;
            }
        }
        .jiqi-ball {
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin-top: 180px;
            img {
                width: 90%;
                height: auto;
            }
            .jiqi-text {
                color: #5689aa;
                font-size: 22px;
                margin-top: -36px;
                margin-left: 10%;
            }   
        }
        .jiqi-cont {
            width: 35%;
            height: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 120px;
            .jiqi-title {
                color: #8dcbdf;
                font-size: 16px;
                line-height: 35px;
                text-align: center;
            }
            .jiqi-data {
                width: 100%;
                min-height: 300px;
                background: url('../../../assets/images/model/machine/jiqi-cont.png')no-repeat center;
                background-size: 100% 100%;
                padding: 8px 8px 8px 20px;
                box-sizing: border-box;
                .jiqi-data-head, .jiqi-data-body {
                    display: flex;
                    color: #89d0e7;
                    font-size: 16px;
                    &>div {
                        flex: 1;
                        text-align: center;
                        padding: 5px 0;
                        box-sizing: border-box;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .model-score {
        width: 100%;
        overflow: auto;
        display: flex;
        .score-left {
            width: 18%;
            // height: 100%;
            margin-left: 10px;
            padding-top: 30px;
            padding-bottom: 30px;
            box-sizing: border-box;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .score-ball {
            width: 28%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            margin-top: 50px;
            position: relative;
            .score-img {
                margin-left: 50px;
                img {
                    width: 100%;
                    height: auto;
                    margin-top: -20px;
                }
            }
            .score-text {
                position: absolute;
                top: 0;
                left: 10px;
                color: #76b5cb;
                font-size: 20px;
            }   
        }
        .score-main {
            flex: 1;
            // display: flex;
            // flex-wrap: wrap;
            padding-top: 10px;
            padding-bottom: 10px;
            box-sizing: border-box;
            column-count: 3; 
            column-gap: 0;
            table-layout: fixed; 
            word-break: break-all; 
            overflow-y: auto;
            .score-cont {
                // width: 30%;
                // margin: 5px auto;
                // display: flex;
                // flex-direction: column;
                break-inside: avoid; 
                box-sizing: border-box; 
                padding: 10px;
                .score-title {
                    color: #8dcbdf;
                    font-size: 16px;
                    line-height: 35px;
                    text-align: center;
                }
                .score-data {
                    width: 100%;
                    min-height: 100px;
                    background: url('../../../assets/images/model/score/score-cont.png')no-repeat center;
                    background-size: 100% 100%;
                    padding: 8px 8px 8px 25px;
                    box-sizing: border-box;
                    .score-data-head, .score-data-body {
                        display: flex;
                        color: #89d0e7;
                        font-size: 16px;
                        &>div {
                            flex: 1;
                            text-align: center;
                            padding: 5px 3px;
                            box-sizing: border-box;
                            cursor: pointer;
                            table-layout: fixed; 
                            word-break: break-all; 
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
    .back {
        position: fixed;
        right: 50px;
        bottom: 80px;
        width: 66px;
        height: 66px;
        line-height: 66px;
        text-align: center;
        border-radius: 50%;
        background: #305968;
        color: #b5e0f0;
        cursor: pointer;
        border: 2px solid #a3b5b8;
        opacity: 0.5;
    }
    .back:hover {
        color: #fff;
    }
    .query {
        position: absolute;
        left: 30px;
        top: 20px;
        color: #5689aa;
    }
</style>